import React, { Component,Fragment } from 'react';
import {Card,Form,Input,Icon,Button,Checkbox,message} from 'antd'
import './../ui.less'

class FormLogin extends Component {
    handleSubmit = (e) => {
        e.preventDefault();
        //获取表单的值
        let userInfo = this.props.form.getFieldsValue()
        this.props.form.validateFields((err,values) => {
            if(!err) {
                console.log('Received values of form: ', values.userName);
                message.info(`${values.userName} 密码:${values.userPwd}`)
                //要获取values的值需要表达提交 onSubmit={this.handleSubmit}  button htmlType="submit"
                message.success(`${userInfo.userName} 恭喜你，您通过本次表单组件学习,当前密码值${userInfo.userPwd}`)
            }
        })
    }
    render() {
        const FormItem = Form.Item
        const { getFieldDecorator } = this.props.form
        return (
            <Fragment>
                <Card title="登陆行内表单" className="card-wrapper">
                    <Form layout="inline">
                        <FormItem>
                            <Input placeholder="请输入用户名" />
                        </FormItem>
                        <FormItem>
                            <Input placeholder="请输入密码" />
                        </FormItem>
                        <FormItem>
                            <Button type="primary">登陆</Button>
                        </FormItem>
                    </Form>
                </Card>
                <Card title="登陆行内表单" className="card-wrapper">
                    <Form onSubmit={this.handleSubmit} layout="horizontal" style={{width:300}}>
                        <FormItem>
                            {
                                getFieldDecorator('userName',{
                                    initialValue:'',
                                    rules:[
                                        {
                                            required:true,
                                            message:'用户名不能为空'
                                        },
                                        {
                                            min:5,max:10,
                                            message:'长度不在范围'
                                        },
                                        {
                                            pattern:new RegExp('^\\w+$','g'),
                                            message:'用户名必须为字母或数字'
                                        }
                                        
                                    ]
                                })(
                                    <Input prefix={<Icon type="user" />} placeholder="请输入用户名" />
                                )
                            }
                            
                        </FormItem>
                        <FormItem>
                            {
                                getFieldDecorator('userPwd',{
                                    initialValue:'',
                                    rules:[
                                        {
                                            required:true,
                                            message:'密码不能为空'
                                        }
                                    ]
                                })(<Input type="password" prefix={<Icon type="lock" />} placeholder="请输入密码" />)
                            }
                        </FormItem>
                        <FormItem>
                            {
                                getFieldDecorator('remember',{
                                    valuePropName:'checked',
                                    initialValue:true
                                })(<Checkbox>记住密码</Checkbox>)
                            }
                            <a href="/forgetPwd" style={{float:'right'}}>忘记密码</a>
                        </FormItem>
                        <FormItem>
                            {/* <Button type="primary" style={{width:300}} onClick={this.handleSubmit}>登陆</Button> */}
                            <Button type="primary" htmlType="submit" style={{width:300}}>登陆</Button>
                        </FormItem>
                    </Form>
                </Card>
            </Fragment>
        )
    }
}

export default Form.create()(FormLogin)